04. Sass Variables

Sass Variables Usage

Variables

Another great sass feature is actually one that’s available in vanilla css as well, but the intentional use of variables in stylesheets, especially when theming, can make for far more flexible and understandable styles. 

$font-stack: Helvetica, sans-serif;
$primary-color: #333;

body {
  font: 100% $font-stack;
  color: $primary-color;
}

In CSS becomes:

body {
  font: 100% Helvetica, sans-serif;
  color: #333;
}

Perhaps that doesn’t look impressive, but what it means most certainly is. Imagine, you’ve built a website with hard coded values for font all throughout. The client comes to two days before launch, after the last pass of QA, and tells you that everything looks good but they want to change the font (as happens from time to time). You might cringe, because it will take you an hour to go through every single reference to font in the whole app, replace it with the new one and change sizes proportionally. Or, you might sigh a sigh of relief because you used a sass variable, and now all of those 170 references to font are all using the same single variable, you change that one value in your code, and can go to bed early that night instead of staying up and working.

Quiz

Select the css properties that might be most valuable as css variables:
SOLUTION:
  • all of the above

Quiz

QUESTION:

Sass variables are denoted with a:

SOLUTION:

NOTE: The solutions are expressed in RegEx pattern. Udacity uses these patterns to check the given answer

Sass Variables RegEx Solution

Quiz

QUESTION:

Write the sass variable declarations required by this code (the values don't matter, you can choose whatever you want): 

section.header {
     background: $theme-secondary;
     color: $font-main;
     nav {
           display: flex;
            ul { 
                   margin: $theme-spacing
            }
      }
}

SOLUTION:

NOTE: The solutions are expressed in RegEx pattern. Udacity uses these patterns to check the given answer

Sass Values RegEx Solution

Next Concept